<template>
  <div class="filter-config-step">
    <!-- 复用你原来的 FilterSettingDialog 内容，但移除弹窗部分 -->
    <div class="filter-setting-container">
      <!-- 顶部标题栏 -->
      <div class="title-bar">
        <div class="warning-icon">⚠</div>
        <div class="title">IIR 滤波器设置</div>
      </div>

      <div class="main-content">
        <!-- 右侧面板 -->
        <div class="right-panel">
          <!-- 设计类型区域 -->
          <!-- <div class="design-type-section">
            <div class="section-title">设计类型</div>
            <div class="design-type-content">
              <div class="form-row">
                <label>预设</label>
                <select v-model="formState.filterPreset">
                  <option value="preset">Preset</option>
                  <option value="manual">Manual</option>
                </select>
              </div>
              
              <div class="form-row">
                <input type="checkbox" v-model="formState.usePhaseCorrection" id="phaseCorrection" />
                <label for="phaseCorrection">使用相位校正</label>
              </div>
            </div>
          </div> -->

          <!-- 设计参数区域 -->
          <div class="design-params-section">
            <div class="section-title">设计参数</div>
            <div class="params-grid">
              <div class="param-label">原型</div>
              <select v-model="formState.prototype" class="param-input">
                <option value="butterworth">Butterworth</option>
                <option value="chebyshev">Chebyshev</option>
                <option value="elliptic">Elliptic</option>
              </select>
              
              <div class="param-label">阶次</div>
              <select v-model="formState.order" class="param-input">
                <option v-for="n in 10" :key="n" :value="n">{{ n }}</option>
              </select>
              
              <div class="param-label">Ripple</div>
              <div class="param-input-container">
                <input type="text" v-model="formState.ripple" class="param-input" />
                <span class="param-unit">dB</span>
              </div>
            </div>
          </div>

          <!-- 频率参数区域 -->
          <div class="frequency-section">
            <div class="section-title">参数</div>
            <div class="params-grid">
              <div class="param-label">类型</div>
              <select v-model="formState.filterType" class="param-input">
                <option value="lowpass">低通</option>
                <option value="highpass">高通</option>
                <option value="bandpass">带通</option>
                <option value="bandstop">带阻</option>
              </select>
              
              <div class="param-label">Fc1</div>
              <div class="param-input-container">
                <input type="text" v-model="formState.fc1" class="param-input" />
                <span class="param-unit">Hz</span>
              </div>
              
              <div class="param-label">Fc2</div>
              <div class="param-input-container">
                <input type="text" v-model="formState.fc2" class="param-input" />
                <span class="param-unit">Hz</span>
              </div>
            </div>
          </div>

          <!-- 输出区域 -->
          <!-- <div class="output-section">
            <div class="section-title">输出</div>
            <div class="form-row">
              <label>滤波器</label>
              <select v-model="formState.selectedFilter">
                <option value="ai2filter">AI 2/Filter</option>
              </select>
            </div>
            <div class="form-row">
              <label>名称</label>
              <input type="text" v-model="formState.filterName" />
            </div>
            <div class="form-row">
              <label>描述</label>
              <input type="text" v-model="formState.filterDescription" />
            </div>
            <div class="form-row">
              <label>单位</label>
              <input type="text" v-model="formState.filterUnit" />
            </div>
            <div class="form-row">
              <label>颜色</label>
              <div class="color-picker-container">
                <input
                  type="color"
                  v-model="formState.color"
                  class="color-picker"
                />
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import type { FilterConfig } from '@/apis/task/dataAnalysis.ts'

const props = defineProps({
  initialData: {
    type: Object as () => FilterConfig | null,
    default: null
  }
})

const emit = defineEmits(['valid'])

// 表单数据
const formState = reactive<FilterConfig>({
  filterPreset: 'preset',
  usePhaseCorrection: false,
  prototype: 'butterworth',
  order: 6,
  ripple: '',
  filterType: 'lowpass',
  fc1: '',
  fc2: '300',
  selectedFilter: 'ai2filter',
  filterName: 'AI 2/Filter',
  filterDescription: '-',
  filterUnit: '-',
  color: '#0000ff'
})

// 验证表单
const validateForm = () => {
  const isValid = !!formState.filterType && !!formState.filterName
  emit('valid', isValid)
  return isValid
}

// 获取配置
const getConfig = () => {
  return validateForm() ? {...formState} : null
}

// 初始化表单
const initForm = () => {
  if (props.initialData) {
    Object.assign(formState, props.initialData)
  }
  validateForm()
}

// 监听表单变化
watch(formState, () => {
  validateForm()
}, { deep: true })

onMounted(() => {
  initForm()
})

defineExpose({
  getConfig
})
</script>

<style scoped>
/* 复用原来的样式，但移除弹窗相关样式 */
.filter-config-step {
  height: 100%;
}

.filter-setting-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.title-bar {
  display: flex;
  align-items: center;
  background-color: #e0e0e0;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

.warning-icon {
  color: #ff6600;
  margin-right: 5px;
}

.title {
  flex-grow: 1;
  font-weight: bold;
}

.main-content {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.right-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.section-title {
  background-color: #e0e0e0;
  padding: 5px 10px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
}

.design-type-section, 
.design-params-section, 
.frequency-section,
.output-section {
  margin-bottom: 10px;
}

.design-type-content {
  padding: 10px;
}

.params-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  padding: 10px;
  gap: 10px;
  align-items: center;
}

.param-label {
  padding-left: 10px;
}

.param-input {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.param-input-container {
  display: flex;
  align-items: center;
}

.param-input-container input {
  flex-grow: 1;
}

.param-unit {
  margin-left: 5px;
  width: 30px;
}

.form-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
  gap: 10px;
}

.form-row label {
  width: 80px;
  text-align: right;
}

.color-picker-container {
  position: relative;
}

.color-picker {
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  appearance: none;
}

.color-picker::-webkit-color-swatch {
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
</style>